<template>
  <a-select
    v-model:model-value="value as any"
    :options="optionData"
    :allow-search="true"
    :multiple="multiple"
    :loading="loading"
    :disabled="loading"
    :filter-option="labelFilter"
    placeholder="请选择角色"
  />
</template>

<script setup lang="ts">
  import type { SelectOptionData } from '@arco-design/web-vue';
  import { computed, onBeforeMount, ref } from 'vue';
  import { getAllRole } from '@/api/system/role';
  import useLoading from '@/hooks/loading';
  import { labelFilter } from '@/types/form';

  const props = withDefaults(
    defineProps<
      Partial<{
        modelValue: number | Array<number>;
        multiple: boolean;
      }>
    >(),
    {
      multiple: false,
    }
  );
  const emits = defineEmits(['update:modelValue']);
  const { loading, setLoading } = useLoading();
  const value = computed({
    get() {
      return props.modelValue;
    },
    set(e) {
      emits('update:modelValue', e);
    },
  });
  const optionData = ref<Array<SelectOptionData>>([]);
  onBeforeMount(async () => {
    setLoading(true);
    try {
      const { data } = await getAllRole();
      optionData.value = data.map((s) => {
        return {
          label: `${s.name} (${s.code})`,
          value: s.id,
        };
      });
    } catch (e) {
      setLoading(false);
    } finally {
      setLoading(false);
    }
  });
</script>

<style scoped lang="less"></style>
